<!DOCTYPE>
<html>

<head>
    <title>Online-Judge</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/bcss/bootstrap.min.css">

    <style>
        #top > div {
            height: 40px;
            line-height: 40px;
        }
        
        #login-area > form input {
            width: 150px;
        }
        
        #func-panel > div {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 5px;
            display: none;
        }
        
        #func-bread ol li:first-child::before {
            content: '当前位置： ';
        }
        
        .list-group a {
            border-radius: 0 0 !important;
        }
        
        #func-menu > div {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container-fluid" style="position: absolute;top:0;right:0;bottom:0;left:0;">
        <!-- 登陆栏 -->
        <div class="row" style="overflow: hidden;height:40px;line-height: 40px;" id="top">
            <div style="float:left;">
                <h4>教师界面</h4>
            </div>
            <div style="float:right;" id="login-area">
                <form class="form-inline">
                    <!--<div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" placeholder="输入用户名">
                    </div>-->
                    <!--<div class="form-group">
                        <label for="passwd">密码</label>
                        <input type="password" class="form-control" id="passwd" placeholder="输入密码">
                    </div>-->
                    <button type="submit" class="btn btn-default">返回主页</button>
                </form>
            </div>
        </div>

        <!-- 内容 -->
        <div style="position: absolute; top:41px;right:0;bottom:0;left:0; overflow: hidden;">
            <div style="float: left;width:5%;height: 100%;" id="func-menu">
                <div class="list-group">
                    <a href="#" class="list-group-item active">学生成绩查看</a>
                    <a href="#" class="list-group-item">题目修改</a>
                    <a href="#" class="list-group-item">反馈</a>
                </div>
            </div>
            <div style="float: left;width:95%;height: 100%; position: relative;">
                <div class="row" style="margin:0px; padding-bottom: 0;" id="func-bread">
                    <ol class="breadcrumb" style="margin:0; background-color: beige; border-radius: 0 0 !important;">
                        <li>
                            <a href="#"></a>
                        </li>
                    </ol>
                </div>
                <!-- 各个功能面板 -->
                <div id="func-panel" style="position: absolute;top:77px;right:0;bottom:0;left:20;">
                    <div id="func-panel-course">
                        <div>
                          <tr height ="100">
                              <td align= "right" bgcolor="#E6E6E6">
                                  <font color="blue">
                                  <font size="6">班级成绩查看：
                                      </font>
                                  </font>
                                  <select style="width:83px;font-size:20px;"  id="class" >
                                  
                                  <option><h1>一班</h1></option>
                                  <option><h1>二班</h1></option>
                                  <option><h1>三班</h1></option>
                                  <option><h1>四班</h1></option>
                            
                                  </select>
                                  
                              </td>
                         
                            </tr>
                               
                            <input type="submit" value=" 查看"  />
                            
                            
                          
                        
                        
                        </div>
                        
                        
                        
                        <td>     </td>
                        
                        <form>
                            
                            <td>    </td>
                            <font color="blue">
                                  <font size="6">个人成绩查看：
                                      </font>
                                  </font>
                            <font size="5">请输入学生学号</font>   <input type="search" value="">  <input type="submit" value="查看">
            
                        
                        </form>
                        
              
                        
                    </div>
                    <div id="func-panel-homework">
               <div>
                   <label><font color="red" size="6">请输入要修改的题目的编号</font></label>
                   <input type="text" value="">  <input type="submit" value="查看要修改的题目">
               
                   
                        
                        
                        </div>       
                        
                        <div>
                           <p><font ></font></p>
              <textarea name="test" rows="20" cols="120"></textarea> 
                            
                            
                        </div>
                        <div>
                        <p></p>
                        
                        <p>    <input type="button" value="确认修改"> </p>
                        </div>
                        
                        
                        
                    </div>
                    <div id="func-panel-question">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        $(function() {
            // 菜单栏点击切换
            $('#func-menu a').on('click', function() {
                $(this).addClass('active').siblings().removeClass('active');
                switch_menu_extra($(this));
            });

            $('#func-menu a').eq(0).trigger('click');
        });

        // 点击切换
        function switch_menu_extra(obj) {
            $('#func-bread ol li').eq(0).text(obj.text());
            var panel = null;
            switch (obj.text()) {
                case '学生成绩查看':
                    panel = $('#func-panel-course');
                    break;
                case '题目修改':
                    panel = $('#func-panel-homework');
                    break;
                case '反馈':
                    panel = $('#func-panel-question');
                    break;
            }

            if (panel != null) {
                panel.show().siblings().hide();
            }
        }
    </script>
</body>

</html>
